<template>
	<view>
		<u-sticky>
			<view style="padding: 10rpx;background-color: #FFFFFF;">
				<u-search :disabled="true" placeholder="找一下你感兴趣的~" v-model="keyword" shape="square" bg-color="#fff" :show-action="false" @click="search">
				</u-search>
			</view>
		</u-sticky>

		<view class="home-page">
			<view class="home-page-content">
				<view class="home-page-content-item" v-for="(item,index) in dataList" :key="index"
					@click="toDetail(item.id)">
					<view class="">
						<image style="width: 100%;border-top-left-radius:25rpx;border-top-right-radius: 25rpx;"
							:src="`${url}${replaceUrl(item.slug)}`"
							mode="widthFix">
						</image>
					</view>
					<view class="home-page-content-item-title u-margin-20">
						{{item.title.rendered}}
					</view>
					<view class="u-margin-20">
						<u-tag class="home-page-content-item-tag " v-for="(tag,tIndex) in item.tags" :key="tIndex"
							:text="tag" mode="light" />
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>

</template>

<script>
	import {
		getAllArticle,
		getMedia,
		getSearch,
		getAllTags
	} from '@/api/api.js'
	import {
		replaceUrl,
		toDetail
	} from '@/comm/comm.js'

	export default {
		data() {
			return {
				dataList: [],
				src: '',
				status: 'loading',
				keyword: '',
				url:this.imgUrl,
				page:1
			};
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if(this.status != 'nomore'){
				this.status = 'loading'
				this.getData()
			}
		},
		onPullDownRefresh(){
			getAllTags()
			this.status = 'loading'
			this.page = 1
			this.getData(true)
		},
		methods: {
			toDetail,
			replaceUrl,
			search(){
				uni.navigateTo({
					url:'/pages/searchPage/searchPage'
				})
			},
			getData(isReload = false) {
				getAllArticle(this.page,5).then(res => {
					if(isReload){
						this.dataList = []
					}
					res.data.forEach(item => {
						this.dataList.push(item)
					})
					uni.stopPullDownRefresh()
					this.page += 1
					this.status = 'loadmore'
				}).catch(_ => {
					uni.stopPullDownRefresh()
					this.status = 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		padding: 30rpx 20rpx;

		&-content {
			&-item {
				width: 100%;
				background-color: #fff;
				margin-bottom: 40rpx;
				border-radius: 25rpx;
				padding-bottom: 5rpx;
				box-shadow: #ababab6b 2rpx 2rpx 8rpx 4rpx;

				&-title {
					font-weight: 600;
					margin-bottom: 10rpx;
					font-size: 20px;
				}

				&-tag {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
